<template>
	<view class="set-spec">
    <view class="pick-multi" v-if="specList.length==0">
      <uni-data-checkbox v-model="mult" :localdata="speceType" selectedColor="#FF3B1E" selectedTextColor="#FF3B1E" @change="multChange"/>
    </view>
		<view class="add-spec" v-if="specList.length==0">
			<uni-forms ref="formRef" :rules="rules" :model="speceBaseInfo">
				<uni-forms-item name="name1" v-if="mult == 2">
					<view class="item">
						<view class="label"> 规格名 </view>
						<uni-easyinput class="easy-input" v-model="speceBaseInfo.name1" placeholder="请输入规格名称" placeholderStyle="color: #D8D8D8;" :input-border="false" :clearable="false" />
					</view>
				</uni-forms-item>
				<uni-forms-item name="value1">
					<view class="item">
						<view class="label"> 规格值 </view>
						<view class="value">
							<TagClose 
								:txt="item" 
								:index="index" 
								fIndex="1" 
								v-for="(item, index) in speceBaseInfo.value1" 
								:key="item"
								@delTag="delTag"
							/>
							<view class="add-text" @tap="openModal(1)"> 添加规格值 </view>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="name2" v-if="isShowSpec>=2">
					<view class="item">
						<view class="label"> 规格名 </view>
						<uni-easyinput class="easy-input" v-model="speceBaseInfo.name2" placeholder="请输入规格名称" placeholderStyle="color: #D8D8D8;" :input-border="false" :clearable="false" />
            <div class="del" @tap="delSpec(1)"> </div>
					</view>
				</uni-forms-item>
				<uni-forms-item name="value2" v-if="isShowSpec>=2">
					<view class="item">
						<view class="label"> 规格值 </view>
						<view class="value">
							<TagClose 
								:txt="item" 
								:index="index" 
								fIndex="2" 
								v-for="(item, index) in speceBaseInfo.value2" 
								:key="item"
								@delTag="delTag"
							/>
							<view class="add-text" @tap="openModal(2)"> 添加规格值 </view>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="name3" v-if="isShowSpec==3">
					<view class="item">
						<view class="label"> 规格名 </view>
						<uni-easyinput class="easy-input" v-model="speceBaseInfo.name3" placeholder="请输入规格名称" placeholderStyle="color: #D8D8D8;" :input-border="false" :clearable="false" />
            <div class="del" @tap="delSpec(2)"> </div>
					</view>
				</uni-forms-item>
				<uni-forms-item name="value3" v-if="isShowSpec==3">
					<view class="item">
						<view class="label"> 规格值 </view>
						<view class="value">
							<TagClose 
								:txt="item" 
								:index="index" 
								fIndex="3" 
								v-for="(item, index) in speceBaseInfo.value3" 
								:key="item"
								@delTag="delTag"
							/>
							<view class="add-text" @tap="openModal(3)"> 添加规格值 </view>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="btn-box">
				<view class="btn" @tap="addSpec" v-if="mult == 2"> 添加规格 </view>
				<view class="btn a-btn" @tap="confirmSpec"> 确认规格 </view>
			</view>
		</view>
		<!-- 后端返回的规格生成项 -->
		<view class="spec-list" v-else>
			<view class="spec-item" v-for="(item, index) in specList" :key="item">
				<view class="spec-title">
					<view class="spec-name"> {{item.spece_name}} </view>
          <view class="delspec" @tap="delCard(index)" v-if="mult == 1">
            <image src="/static/icon/shop/min.png" class="del-img" />
            <text class="text"> 删除 </text>
          </view>
				</view>
				<view class="spec-info">
					<view class="item">
						<view class="label"> 规格名称 </view>
						<view class="value">
							<input v-model="item.spece_value_name" type="text" placeholder="请输入规格名称" placeholder-class="placeCss" />
						</view>
					</view>
					<view class="item">
						<view class="label"> 市场价 </view>
						<view class="value">
							<input v-model="item.original_price" type="text" placeholder="请输入市场价格" placeholder-class="placeCss" />
						</view>
					</view>
					<view class="item">
						<view class="label"> 销售价 </view>
						<view class="value">
							<input v-model="item.price" type="text" placeholder="请输入销售价格" placeholder-class="placeCss" />
						</view>
					</view>
					<view class="item">
						<view class="label"> 总库存 </view>
						<view class="value">
							<input v-model="item.stock" type="text" placeholder="请输入商品总库存数量" placeholder-class="placeCss" />
						</view>
					</view>
					<view class="upload-img">
						<view class="title"> 上传规格图片 </view>
						<view class="img-box">
							<view class="img" v-if="item.thumb_url">
								<image :src="item.thumb_url" class="chart" />
								<image src="/static/icon/shop/close-img.png" @tap="delImg(index)" class="close" />
							</view>
							<view class="add" @tap="chooseImg(index)" v-else> </view>
						</view>
						<view class="tips"> 一个规格只能上传一张图，只支持jpg格式 </view>
					</view>
				</view>
			</view>
		</view>
		<Modal title="添加规格值" ref="modalRef" input="请输入规格值" @confirm="addSpecVal" />
	</view>
</template>

<script setup>
	import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app'
	import TagClose from './TagClose.vue';
	import Modal from '@/components/Modal.vue';
	import ChooseBtn from '@/components/ChooseBtn.vue';
	import { isNull, isMobile } from '@/utils/valdate.js'
	import { GetSpecInfoApi, uploadImgApi } from '@/service/shop.js'
  const speceType = [
    { value: '1', text: '单规格' },
    { value: '2', text: '多规格' }
  ]
  const mult = ref('1')
	const formRef = ref()
	const modalRef = ref()
	const isShowSpec = ref(1)
	const rules = {
		name1: isNull('规格名'),
		value1: isNull('规格值'),
		name2: isNull('规格名'),
		value2: isNull('规格值'),
		name3: isNull('规格名'),
		value3: isNull('规格值'),
	}
	const speceBaseInfo = ref({
		name1: '默认规格',
		name2: '',
		name3: '',
		value1: [],
		value2: [],
		value3: [],
	})
	const specList = ref([])
	const goods_spece = ref() // 此字段是给父组件使用的
	// 打开 modal 弹窗
	const valueIndex = ref()
  const addspevNvue = ref()
  // 切换单多规格
  const multChange = (e) => {
    const { detail } = e
    if(detail.value == 1) {
      isShowSpec.value = 1
      speceBaseInfo.value.name1 = '默认规格'
    } else {
      speceBaseInfo.value.name1 = ''
    }
  }
	const openModal = (i) => {
    modalRef.value.open()
		valueIndex.value = i
	}
	// 添加规格项
	const addSpec = () => {
		if(isShowSpec.value == 3) return getApp().globalData.toast('最多添加三个规格')
		isShowSpec.value = isShowSpec.value + 1
	}
  // 删除规格项
  const delSpec = (val) => {
    isShowSpec.value = val
  }
	// 添加规格值
	const addSpecVal = (val) => {
		if(!val) return getApp().globalData.toast('请输入规格值')
		if(valueIndex.value == 1) {
			speceBaseInfo.value.value1.push(val)
		} else if(valueIndex.value == 2) {
			speceBaseInfo.value.value2.push(val)
		} else {
			speceBaseInfo.value.value3.push(val)
		}
    modalRef.value.close()
	}
	// 删除规格值
	const delTag = (e) => {
		const { fIndex, index } = e
		if(fIndex==1) speceBaseInfo.value.value1.splice(index, 1)
		else if(fIndex==2) speceBaseInfo.value.value2.splice(index, 1)
		else speceBaseInfo.value.value3.splice(index, 1)
	}
  // 删除生成的规格单元
  const delCard = (i) => {
    specList.value.splice(i, 1)
    speceBaseInfo.value.value1.splice(i, 1)
  }
	const chooseImg = (i) => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				uploadImgApi(res.tempFilePaths[0]).then(res => {
					specList.value[i].thumb = res.id
					specList.value[i].thumb_url = res.path
				})
			}
		})
	}
	const delImg = (i) => {
		specList.value[i].thumb = ''
		specList.value[i].thumb_url = ''
	}
	// 确认规格值
	const confirmSpec = () => {
		formRef.value.validate().then(() => {
			const { name1, name2, name3, value1, value2, value3 } = speceBaseInfo.value
			const params = {
				sku_details: {
					goods_spece: []
				}
			}
			if(isShowSpec.value==1) {
				params.sku_details.goods_spece = [{ name: name1, value: value1 }]
			} else if(isShowSpec.value ==2) {
				params.sku_details.goods_spece = [
					{ name: name1, value: value1 },
					{ name: name2, value: value2 }
				]
			} else {
				params.sku_details.goods_spece = [
					{ name: name1, value: value1 },
					{ name: name2, value: value2 },
					{ name: name3, value: value3 },
				]
			}
			GetSpecInfoApi(params).then(res => {
				specList.value = res
				goods_spece.value = params.sku_details.goods_spece
			})
		})
	}
  onLoad(() => {
   
  })
	defineExpose({
		specList,
		goods_spece
	})
</script>

<style lang="scss" scoped>
	.set-spec {
		margin-bottom: 10px;
		border-radius: 10px;
		overflow: hidden;
    .pick-multi {
      padding: 10px 0;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      :deep(.checklist-group) {
        justify-content: center;
      }
      :deep(.checklist-text) {
        font-size: 18px !important;
      }
    }
		.add-spec {
			padding: 0 12px 10px;
			background-color: #fff;
			.uni-forms-item {
				margin-bottom: 0;
				align-items: center;
				min-height: 50px;
				border-bottom: 1px solid #eeeeee;
				box-sizing: border-box;
				.item {
					min-height: 50px;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					.label {
						color: #333333;
						font-size: 16px;
						font-weight: 400;
						margin-right: 10px;
					}
					.value {
						flex: 1;
						display: grid;
						gap: 5px 8px;
						grid-template-columns: repeat(3, 1fr);
						.add-text {
							color: #008FF4;
							font-size: 14px;
							font-weight: 400;
						}
					}
					.easy-input {
						flex: 1;
						color: #D8D8D8;
						font-size: 14px;
						font-weight: 400;
						text-align: right;
						margin-left: 10px;
					}
          .del {
            width: 16px;
            height: 16px;
            background: url('/static/icon/shop/min.png') no-repeat center center;
            background-size: 100%;
            margin-left: 10px;
          }
				}
			}
			:deep(.uni-forms-item__error) {
				left: 0;
				top: 100%;
				right: 12px;
				font-size: 12px;
				text-align: right;
				padding-bottom: 3px;
				transform: translateY(-100%);
			}
			.btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.btn {
					flex: 1;
					color: #333;
					height: 40px;
					display: flex;
					margin-top: 10px;
					border-radius: 40px;
					align-items: center;
					justify-content: center;
					border: 1px solid #e5e5e5;
					box-sizing: border-box;
					background-color: #ffffff;
				}
				.a-btn {
					border: none;
					color: #ffffff;
					margin-left: 10px;
					background-color: #FF3B1E;
				}
			}
		}
		.spec-list {
			// padding-top: 10px;
			.spec-item {
				margin-top: 15px;
				.spec-title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10px;
					.spec-name {
						color: #333333;
						font-size: 14px;
						font-weight: 500;
						line-height: 16px;
					}
          .delspec {
            display: flex;
            align-items: center;
            .del-img {
              width: 16px;
              height: 16px;
              margin-right: 4px;
            }
            .text {
              color: #FF3B1E;
              font-size: 14px;
              line-height: 14px;
            }
          }
				}
				.spec-info {
					padding: 0 12px;
					border-radius: 10px;
					background-color: #fff;
					.item {
						height: 50px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #EEEEEE;
						box-sizing: border-box;
						.label {
							font-weight: 400;
							font-size: 16px;
							color: #333333;
							line-height: 20px;
						}
						.value {
							input {
								color: #333333;
								font-size: 14px;
								font-weight: 400;
								text-align: right;
								line-height: 20px;
							}
							.placeCss {
								color: #D8D8D8;
								font-size: 14px;
								font-weight: 400;
							}
						}
					}
					.upload-img {
						padding: 20px 4px 11px;
						.title {
							color: #333333;
							font-size: 16px;
							font-weight: 400;
							line-height: 20px;
							margin-bottom: 15px;
						}
						.img-box {
							margin-bottom: 10px;
							.add {
								width: 74px;
								height: 74px;
								position: relative;
								background: #F4F4F4;
								border-radius: 10px;
								display: inline-block;
								&::before, &::after {
									display: block;
									content: '';
									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%, -50%);
									width: 24px;
									height: 2px;
									background: #D8D8D8;
								}
								&::after {
									width: 2px;
									height: 24px;
								}
							}
							.img {
								width: 74px;
								height: 74px;
								margin-left: 0;
								position: relative;
								display: inline-block;
								.chart {
									width: 74px;
									height: 74px;
									border-radius: 10px;
								}
								.close {
									width: 18px;
									height: 18px;
									position: absolute;
									right: 0;
									top: 0;
								}
							}
						}
						.tips {
							color: #AAAAAA;
							font-size: 12px;
							font-weight: 400;
							line-height: 20px;
						}
					}
				}
			}
		}
	}
</style>